<template>
	<view>
		<address-info :address="address"></address-info>
		<view class="p-t-30 p-b-30 m-l-35 m-r-35 w-680">
			<u-swiper :list="swiper" :height="260"></u-swiper>
		</view>
		<title></title>
		<view>
			<view class="d_flex d_flex_items_center d_flex_around p-t-10 p-b-10 color333 f-28">
				<view v-for="(item,index) in tab" :key="index" @click="tabBtn(index)">
					<text class="p-r-15">{{item.title}}</text>
					<u-icon :name="item.status == 'desc' ? 'arrow-up' : 'arrow-down'" color="#999" size="26"
						v-show="index != 3"></u-icon>
				</view>
			</view>
		</view>
		<list :list="list" @orders="orders"></list>
		<tabBar :type1="false"></tabBar>
		<u-select v-model="carShow" :list="carList" @confirm="getCar"></u-select>
		<u-popup v-model="popupShow" mode="bottom" border-radius="14">
			<view class="p-25">
				<scroll-view scroll-y="true" style="height:600rpx;">
					<u-parse :html="content"></u-parse>
				</scroll-view>
				<view class="p-t-25">
					<u-button type="primary" @click="agree">我已阅读且同意免责协议</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import addressInfo from './componetns/addressInfo.vue'
	import title from './componetns/title.vue'
	import list from './componetns/list.vue'
	export default {
		components: {
			addressInfo,
			title,
			list
		},

		data() {
			return {
				popupDis:false,
				popupShow:false,
				content: ``,
				oid: "",
				carShow: false,
				carList: [],
				address: "位置获取中....",
				swiper: [],
				tab: [{
						title: "时间",
						status: ''
					},
					{
						title: "距离",
						status: ''
					},
					{
						title: "金额",
						status: ''
					},
					{
						title: "车辆",
						status: true
					}
				],
				list: [],
				page: 1,
				last_page:'',
				latitude: "",
				longitude: ""
			}
		},
		onReady() {
			this.isGetLocation();
		},
		onReachBottom(){
				this.getaddList(this.latitude, this.longitude,)
			},
		onLoad() {
			this.getCarType()
			this.getStatement()
			this.getSwiper()
		},
		methods: {
			async getSwiper(){
				let data = await this.$request.post('/api/common/banner')
				console.log(data)
				this.swiper = data.data.data.index
			},
			async getStatement(){
				let data = await this.$request.post('/api/common/disclaimers',{
					type: 0
				})
				console.log(data)
				this.content = data.data.data
			},
			async orders(id) {
				if(!this.popupDis){
					this.popupShow = true
				}else{
					let data = await this.$request.post('/api/Consumer/receivingOrder', {
						oid: id
					})
					console.log(data)
					uni.showToast({
						title: data.data.msg,
						icon: "none"
					})
					this.getList(this.latitude, this.longitude, this.tab[0].status, this.tab[1].status, this.tab[2].status,this.tab[3].status)
				}
			},
			agree(){
				this.popupShow = false
				this.popupDis = true
			},
			async getCarType() {
				let res = await this.$request.post('/api/common/carttype')
				console.log('获取车辆', res.data.data)
				let list = res.data.data
				list.forEach(item => {
					this.carList.push({
						value: item.id,
						label: item.name
					})
				})
			},
			async getList(lat, lng, time, distance, money, cartype) {
				let data = await this.$request.post('/api/Consumer/getOrderList', {
					time: time,
					distance: distance,
					money: money,
					cartype: cartype || "",
					page: this.page,
					lat: lat,
					lng: lng
				})
				console.log('接单大厅列表', data)
				if (data.data.code === 1) {
					this.list = data.data.data.data 
					this.last_page = data.data.data.last_page
				} else {
					uni.showToast({
						title: data.data.msg,
						icon: "none"
					})
				}
			},
			async getaddList(lat, lng, time, distance, money, cartype) {  
				
				
					
				if(this.last_page == this.page) {
					return !1
				} else {
					this.page += 1 
				}
				let data = await this.$request.post('/api/Consumer/getOrderList', {
					time: time|| "",
					distance: distance|| "",
					money: money|| "",
					cartype: cartype || "",
					page: this.page ,
					lat: lat,
					lng: lng
				})
				console.log('接单大厅列表', data)
				if (data.data.code === 1) {
					
					data.data.data.data.forEach(item=>{
						this.list.push(item)
					})
					
				} else {
					uni.showToast({
						title: data.data.msg,
						icon: "none"
					})
				}
			},
			getCar(e) { 
				console.log('选择了')
				console.log(e)
				this.tab[3].title = e[0].label 
				// this.tab[3].
				this.getList(this.latitude, this.longitude, this.tab[0].status, this.tab[1].status, this.tab[2].status, e[
					0].value)
			},
			tabBtn(index) { 
			  var forindex = index
				if (index == 3) {
					this.carShow = true 
					
					return
				} else {
					if (    this.tab[index].status == 'desc') {
						this.tab[index].status = 'asc' 
						this.tab.forEach((item,isindex) =>{
							if(isindex !=forindex ) {
								item.status  == ''
							}
						})
					} else {
						this.tab[index].status = 'desc'
						this.tab.forEach((item,isindex) =>{ 
									
							if(isindex !=forindex ) { 
								
								item.status  = ''
							}
							
						})
					}
					console.log(this.tab )
				}
				this.getList(this.latitude, this.longitude, this.tab[0].status, this.tab[1].status, this.tab[2].status, this.tab[3].status)
			},
			isGetLocation(a = "scope.userLocation") { // 3. 检查当前是否已经授权访问scope属性，参考下截图
				var _this = this;
				uni.getSetting({
					success(res) {
						if (!res.authSetting[a]) { //3.1 每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						} else {
							_this.getLocationInfo()
						}
					}
				});
			},
			getAuthorizeInfo(a = "scope.userLocation") { //1. uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this = this;
				uni.authorize({
					scope: a,
					success() { //1.1 允许授权
						_this.getLocationInfo();
					},
					fail() { //1.2 拒绝授权
						console.log("你拒绝了授权，无法获得周边信息")
						uni.showToast({
							title: "拒绝可能会导致某些功能无法使用",
							icon: "none"
						})
					}
				})
			},
			getLocationInfo() { //2. 获取地理位置
				var _this = this;
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						console.log(res)
						let latitude = res.latitude.toString();
						let longitude = res.longitude.toString();
						_this.latitude = res.latitude.toString();
						_this.longitude = res.longitude.toString();
					
						_this.getList(latitude, longitude,'','','')
						uni.request({
							header: {
								"Content-Type": "application/text"
							},
							url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' +
								longitude + '&key=2OZBZ-3A7CJ-HIOFB-K7PRF-CUDD6-LSB7R',
							success(re) {
								console.log(re)
								if (re.statusCode === 200) {
									console.log("获取中文街道地理位置成功")
									_this.address = re.data.result.address
								} else {
									console.log("获取信息失败，请重试！")
									_this.address = "位置获取失败"
								}
							}
						});
					}
				});
			}
		}
	}
</script>
